<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<!-- 顶栏消息通知 -->
<template class="notice">
  <el-dropdown trigger="click">

    <el-badge :value="unReadTotal" :hidden="!unReadTotal" :class="{'flashing-text':unReadTotal>0}">
      <i class="el-icon-bell" ><el-icon >
        <bell />
      </el-icon></i>
    </el-badge>
    <template #dropdown>

      <div class="ele-notice-group">
        <el-tabs class="mytabs" v-model="activeName">

<!--          <el-tab-pane name="notice" :label="noticeTitle">-->
<!--            <div class="ele-notice-list ele-scrollbar-mini">-->
<!--              <div-->
<!--                      v-for="(item, index) in noticeList"-->
<!--                      :key="index"-->
<!--                      class="ele-notice-item"-->
<!--              >-->
<!--                <div class="ele-cell ele-notice-item-wrapper">-->
<!--                  <i :class="[item.icon, 'ele-notice-item-icon']"></i>-->
<!--                  <div class="ele-cell-content">-->
<!--                    <div class="ele-elip">{{ item.title }}</div>-->
<!--                    <div class="ele-text-secondary ele-elip">{{ item.time }}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <el-divider />-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="ele-cell ele-notice-actions">-->
<!--              <el-divider direction="vertical" class="line-color-light" />-->
<!--              <router-link to="/" class="ele-cell-content">-->
<!--                查看更多-->
<!--              </router-link>-->
<!--            </div>-->
<!--          </el-tab-pane>-->


            <el-tab-pane :label="todoTitle" name="todo">
                <div class="ele-notice-list ele-scrollbar-mini">
                    <div
                            v-for="(item, index) in todoList"
                            :key="index"
                            class="ele-notice-item"
                    >
                        <div class="ele-notice-item-wrapper">
                            <div class="ele-cell ele-cell-align-top">
                                <div class="ele-cell-content ele-elip">{{ item.title }}</div>
                                <el-tag size="mini" :type="['info', 'danger', ''][item.status]">
                                    {{ ['未开始', '即将到期', '进行中'][item.status] }}
                                </el-tag>
                            </div>
                            <div class="ele-text-secondary ele-elip">
                                {{ item.description }}
                            </div>
                        </div>
                        <el-divider />
                    </div>
                </div>
                <div v-if="todoList.length" class="ele-cell ele-notice-actions">
                    <div class="ele-cell-content" @click="clearTodo">清空待办</div>
                    <el-divider direction="vertical" class="line-color-light" />
                    <router-link to="/user/message?type=todo" class="ele-cell-content">
                        查看更多
                    </router-link>
                </div>
                <ele-empty v-if="!todoList.length" text="已完成所有任务" />
            </el-tab-pane>


          <el-tab-pane name="letter" :label="letterTitle"   class="letterClass" >
            <div class="ele-notice-list ele-scrollbar-mini">
              <div
                      v-for="(item, index) in letterList"
                      :key="index"
                      class="ele-notice-item"
              >

                <div class="ele-cell ele-notice-item-wrapper" @click="readMsg(item)">
                  <i :class="[item.icon, 'ele-notice-item-icon']"></i>
                  <div class="ele-cell-content">
                      <div style="display: inline; padding-right: 5px;">
                          <span style="font-weight: bold"  v-show="item.readstatus"> 【已读】</span>
                          <span  style="font-weight: bold;color: red;" class="flashing-text" v-show="!item.readstatus"> 【未读】</span>
                      </div>

                      <div style="display: inline;"> {{ item.title }}</div>
                      <div style="display: inline;display: inline;right: 0px;position: absolute;">{{ formatDate(item.createTime)}}</div>

<!--                    <div class="ele-elip" :class="{'unread':!item.readstatus}">【{{ item.readstatus==1?"已读":"未读" }}】{{ item.title }}</div>-->
<!--                    <div class="ele-text-secondary ele-elip">{{ item.time }}</div>-->

                  </div>
                </div>

              </div>
            </div>
            <div class="ele-cell ele-notice-actions">
              <el-divider />
              <router-link to="/info/notice" class="ele-cell-content">
                查看更多
              </router-link>
            </div>
          </el-tab-pane>

          <el-tab-pane name="gg" :label="ggTitle">
            <div class="ele-notice-list ele-scrollbar-mini">
              <div
                      v-for="(item, index) in ggList"
                      :key="index"
                      class="ele-notice-item"
              >
                <div class="ele-cell ele-notice-item-wrapper ele-cell-align-top" @click="readMsg(item.id,item.readstatus)">
<!--                  <el-avatar :src="item.avatar" size="medium" />-->
                  <div class="ele-cell-content">
                      <div class="ele-elip" >
                          <div style="display: inline;  font-weight: bold;font-style: italic;color: red;padding-right: 5px;"><span  v-if="isSevenDaysAgo(item.createTime)" class="flashing-text"> NEW</span></div>
                          <div style="display: inline;"> {{ item.title }}</div>
                          <div style="display: inline;display: inline;right: 0px;position: absolute;">{{ formatDate(item.createTime)}}</div>
                      </div>
                    <div class="ele-text-secondary ele-elip">
                      {{ item.content }}
                    </div>
                  </div>
                </div>
                <el-divider />
              </div>
            </div>
            <div v-if="ggList.length" class="ele-cell ele-notice-actions">
              <!--              <div class="ele-cell-content" @click="clearNotice">清空通知</div>-->
              <el-divider direction="vertical" class="line-color-light" />
              <router-link to="/info/notice" class="ele-cell-content">
                查看更多
              </router-link>
            </div>
          </el-tab-pane>




        </el-tabs>

      </div>
    </template>

  </el-dropdown>


</template>

<script>
  import { getNoticePage ,getUnreadNoticeNum,updateMsg} from '@/framework-core/api/login';


  export default {
    name: "top-notics",
    data() {
      return {
        //消息类型：1：发送消息  2：公告，3：系统消息
        // 是否显示
        visible: false,
        // 选项卡选中
        activeName: 'letter',
        unReadTotal:"",
        // 业务消息
        noticeList: [],
        // 消息标题
        letterList: [],
        // 待办数据
        todoList: [],
        // 公告标题
        ggList: []
      };
    },
    computed: {
      // // 业务消息标题
      // noticeTitle() {
      //   return '业务消息' + (this.noticeList.length ? `(${this.noticeList.length})` : '');
      // },
      // 待办标题
      todoTitle() {
        return '待办' + (this.todoList.length ? `(${this.todoList.length})` : '');
      },
      // 消息标题
      letterTitle() {
        var un3 = this.letterList.filter(item=>item.readstatus == 0).length;
        return '消息' + (this.letterList.length ? "(♥"+ un3+"/"+ `${this.letterList.length})` : '');
      },

      // 公告标题
      ggTitle() {
          var un4 = this.ggList.filter(item=>this.isSevenDaysAgo(item.createTime)).length;
          return '通知' + (this.ggList.length ? "("+ un4+"/"+ `${this.ggList.length})` : '');
      },
      // // 未读数量
      // unreadNum() {
      //   // var un1 = this.noticeList.filter(item=>item.readstatus == 1).length;
      //   //var un2 = this.todoList.filter(item=>item.readstatus == 1).length;
      //   var un3 = this.letterList.filter(item=>item.readstatus == 0).length;
      //   // var un4 = this.ggList.filter(item=>item.readstatus == 1).length;
      //   return un3;
      // },
        // // 未读数量
        // newNum() {
        //      var un4 = this.ggList.filter(item=>this.isSevenDaysAgo(item.createTime)).length;
        //     return un4;
        // }
    },
    created() {
      this.query();

    },
    methods: {
        isSevenDaysAgo(date) {
            const sevenDaysAgo = new Date();
            sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
            const itemDate = new Date(date);
            return itemDate > sevenDaysAgo;
        },
        formatDate  (dateTimeString) {
            const date = new Date(dateTimeString)
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            const hours = String(date.getHours()).padStart(2, '0')
            const minutes = String(date.getMinutes()).padStart(2, '0')
            return `${year}-${month}-${day} ${hours}:${minutes}`
        },
        getUnReadTotal() {
          let $that = this;
          getUnreadNoticeNum().then((result) => {
            if (!result.data.data) {
              $that.unReadTotal = 0;
            } else {
              $that.unReadTotal = result.data.data.data;
            }

            if ($that.unReadTotal && $that.unReadTotal > 99) {
              $that.unReadTotal = '99+';
            }
          })
              .catch((e) => {
                $that.$message.error(e.message);
              });
        },

        /* 查询数据 */
      query() {
          this.getUnReadTotal();
          let $that = this;

          getNoticePage({"pageNum": 1, "pageSize": 10, "entity": {"type": 1}})
              .then((result) => {
                  if(result.data.data){
                    $that.letterList = result.data.data.records || [];
                  }else{
                    $that.letterList = [];
                  }
                  $that.remindMsg($that.letterList)
              })
              .catch((e) => {
                  $that.$message.error(e.message);

              });

          getNoticePage({"pageNum": 1, "pageSize": 10, "entity": {"type": 2}})
              .then((result) => {
                  if(result.data.data){
                    $that.ggList = result.data.data.records || [];
                  }else{
                    $that.ggList = [];
                  }
                  $that.remindMsg($that.ggList)
              })
              .catch((e) => {
                  $that.$message.error(e.message);
              });
      },
        remindMsg(msgs){
          // 强制提醒：通知有开始；结束时间 则按时间计算，没有一直提醒；消息可以没有，表示已读即可
            if(!msgs || msgs.length<1){
                return
            }
            var currentDate = new Date();
            for(var i=0;i<msgs.length;i++) {
                var msg = msgs[i];
                if (!msg.remind) {
                    continue
                }
                if (msg.stime || msg.etime) {
                    if((!msg.stime  ||  msg.stime <=currentDate) && (! msg.etime || msg.etime>currentDate) ){
                        this.showMsg(msg);
                    }
                } else {
                    if (msg.type == 2) {
                        this.showMsg(msg);
                    } else {
                        if (!msg.readstatus) {
                            this.showMsg(msg);
                        }
                    }
                }
            }
        },

        showMsg(msg){
            this.$notify({
                title: '提示',
                type: 'warning',
                message: msg.title,
                duration: 0
            });
        },

      readMsg(item) {

          if (item.readstatus == 1) {
              return
          }
          var $item = item;
          var $that = this;
          updateMsg({"messageId": item.id}).then(() => {
              $item.readstatus = 1;
              $that.getUnReadTotal();
          }).catch(() => {
          });
      },
      /* 清空通知 */
      clearNotice() {
        this.noticeList = [];
      },
      /* 清空通知 */
      clearLetter() {
        this.letterList = [];
      },
      /* 清空通知 */
      clearTodo() {
        this.todoList = [];
      }
    }
  };
</script>

<style lang="scss">

  .notice {
    position: absolute;
    left: 712px;
    top: 64px;

  }

.unread{
  color: #f5686f;
}

  .mytabs{
    --el-tabs-header-height: 40px;
    width: 400px;
    /*height: 300px;*/
    margin-left: 10px;
    margin-right: 10px;
  }
  /* 消息通知pop */
  .ele-notice-pop {
    padding: 0 !important;

    /* tab */
    .el-tabs__nav-scroll {
      text-align: center;
    }

    .el-tabs__nav {
      float: none;
      display: inline-block;
    }

    .el-tabs__item {
      height: 44px;
      line-height: 44px;
      padding: 0 20px !important;
    }

    /* 空视图 */
    .ele-empty {
      padding: 100px 0;
    }
  }

  .ele-notice-group {
    display: block;

    .el-badge {
      line-height: 1;
      display: block;
    }
  }



  /* 列表 */
  .ele-notice-list {
    padding-top: 8px;
    max-height: 360px;
    overflow: auto;
  }

  .ele-notice-item {
    .ele-notice-item-wrapper {
      padding: 2px 5px;
      transition: background-color 0.2s;
      cursor: pointer;

      &:hover {
        background-color: hsla(0, 0%, 60%, 0.05);
      }
    }

    .ele-text-secondary {
      margin-top: 5px;
      font-size: 13px;
    }

    .ele-cell-desc {
      margin-top: 3px !important;
      font-size: 12px !important;
    }
  }

  .ele-notice-item-icon {
    width: 32px;
    height: 32px;
    line-height: 32px !important;
    color: #fff;
    font-size: 16px;
    background-color: #60b2fc;
    border-radius: 50%;
    text-align: center;

    &.el-icon-s-check {
      background-color: #f5686f;
    }

    &.el-icon-video-camera {
      background-color: #7cd734;
    }

    &.el-icon-s-claim {
      background-color: #faad14;
    }

    &.el-icon-message-solid {
      background-color: #2bcacd;
    }
  }

  /* 操作按钮 */
  .ele-notice-actions > .ele-cell-content {
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    color: inherit;

    &:hover {
      background-color: hsla(0, 0%, 60%, 0.05);
    }
  }

  .flashing-text {
      animation: flash 1s infinite;
  }

    tab-letter{

    }
</style>
